<template>

    <div>
        <common>
            <div>
        <h2>关于我们</h2>
        <!-- 两种方式 -->
        <router-link to="AAA">点我跳转</router-link><br>
        <router-link :to="{name:'name2'}">点我跳转</router-link><br>
        <!-- 都会转化成A标签放在页面上 -->
        <button @click="send">跳转2</button>
        <ul>
            <li @click="toDetall(item)" v-for="(item, index) in list" :key="index">{{item.title}}</li>
        </ul>
            </div>
            </common>
    </div>
</template>
<script>
import common from './common.vue'
export default {
  components: { common },
    name:'about',
    data(){
        return{
            list:[
                {title:'标题1',content:'dnizx;lj ioad'},
                {title:'标题2',content:'sav kd;lj ioad'},
                {title:'标题3',content:'dnizx;wevsfdukjnm ioad'},
                {title:'标题4',content:'dnizx;wqvewsfd ghknj ioad'},
            ]
        }
    },
    methods:{
        send(){//点击跳转页面
            console.log(this.$router)
            // push是 vueRouter里面跳转的方法所以跳转的方法要用.
            // push从当前页面跳转到另一个页面， 栈内追加一条路由  常用这种方法
            this.$router.push({
                // path:'/AAA',
                name:'name1'
            })
            // this.$router.replace({//替换当前页面 把当前页面删掉跳转到一个新页面 用于注册登陆页面
            //     path:'/AAA' ,
            // })
        },
        toDetall(item){
            console.log(item.content)
            // this.$router.push({
            //     name:'newsDea',
            //     params:item//穿整个
                // params:{
                //     nr:item.content//传具体的值
                // }
            // })
            // this.$router.push({//query传参
            //     name:'newsDea',
            //     query:item
            // })
            this.$router.push({
                // path:'/news/Dea'+'/'+item.title+'/'+item.content,
                // path:`/news/Dea/${item.title}/${item.content}`
                name:'newsDea',
                params:{
                    a:item.title,
                    b:item.content
                }
            })
        }
    }
}
</script>
<style  scoped>
    ul{
        list-style: none;
    }
</style>